<template>
    <div class="">
        <div class="brandCountContainer">
            <div style="display:flex; justify-content: space-between;width:100%;">
                <p>品牌统计</p>
                <div style="margin-right:20px;line-height:45px;hieght:30px;">
                    <i class="iconfont" style="display:inline-blcok;height:30px;cursor:pointer" @click="cancel">&#xe619;</i>
                </div>
            </div>
            <div class="invoiceContent">
                <el-form :model="ruleForm"  label-position="left" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" :inline="true">
                <el-form-item prop="bname">
                    <el-input v-model="ruleForm.bname" placeholder="输入创建品牌名称" size="medium"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="ruleForm.code"  placeholder="输入创建品牌编码" size="medium"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button  @click="submitForm('ruleForm')" size="medium">新增</el-button>
                </el-form-item>
                </el-form>
            </div>
            <div class="brandTable"> 
                <el-table
                :data="allBrand"
                size="small"
                v-loading="loading2"
                element-loading-text="正在加载中,请稍后..."
                style="width: 100%">
                <el-table-column
                prop="bname"
                label="品牌名称"
                align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.bnameEdit" class="cell-edit-input">
                        <el-input v-model="scope.row.bname" @blur='handleBlur(scope.row,scope.$index,"bnameEdit")' placeholder="请输入备注信息"></el-input>
                    </span>
                    <span v-if="!scope.row.bnameEdit" style="margin-left:10px;" class="cell-icon" @click="handleEdit(scope.row,scope.$index, 'bnameEdit')">{{scope.row.bname || '编辑'}}</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="code"
                label="品牌编码"
                align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.codeEdit" class="cell-edit-input">
                        <el-input v-model="scope.row.code" @blur='handleBlur(scope.row,scope.$index,"codeEdit")'></el-input>
                    </span>
                    <span v-if="!scope.row.codeEdit" style="margin-left:10px;" class="cell-icon" @click="handleEdit(scope.row,scope.$index, 'codeEdit')">{{scope.row.code || '编辑'}}</span>
                </template>
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="创建人"
                    align="center">
                </el-table-column>
                 <el-table-column
                    prop="createtime"
                    label="创建时间"
                    align="center"
                    :formatter="dateFormat">
                </el-table-column>
                <el-table-column
                    prop="updatetime"
                    label="更新时间"
                    align="center"
                    :formatter="dateFormat">
                </el-table-column>
               <el-table-column
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="saveBrand(scope.row)">保存</el-button>
                        <el-button type="text" @click="delBrand(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
                  </el-table>
            </div>
        </div>
    </div>
</template>
<script>
import {localStorage} from "js/localStorage"
import api from 'js/service'
export default {
    inject:['reload'],
    data(){
        return{
            userId:'',
            loading2:true,
            ruleForm: {
                bname:'',
                code:'',
            },
            rules: {
                bname: [
                    { required: true, message: '请输入品牌名称', trigger: 'change' }
                ],
                code: [
                    { required: true, message: '请输入品牌编码', trigger: 'change' }
                ],
            },
            allBrand:[],
        }
    },
    props:{
      
    },
    created(){
        this.userId = localStorage.get('userID')
        this.brandList()    
       
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addBrand()
                }else{
                    return false;
                }
            });
        },
        //创建品牌
        addBrand(){
           for(var i in this.allBrand){
               if(this.allBrand[i].bname==this.ruleForm.bname){
                    return this.$message.warning("品牌名称不能重复")
               }else if(this.allBrand[i].code==this.ruleForm.code){
                    return this.$message.warning("品牌编码不能重复")
               }
           }
            let parmas={
                bname:this.ruleForm.bname,
                code:this.ruleForm.code,
                userId:this.userId
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.$message.success("添加成功")
                    this.ruleForm.bname="";
                    this.ruleForm.code="";
                    this.brandList()
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.erpBrandInfoAdd(parmas,success)
        },
        brandList(){
            let success=data=>{
                if(data.code=="OK"){
                    this.allBrand=data.data
                    this.loading2=false
                }else{
                    this.$message.error(data.msg)
                    this.loading2=false
                }
            }
            api.getBrandDetail({},success)
        },
        handleEdit(row,index, editKey){
            let _row = row
            _row[editKey]  = true
            this.$set(this.allBrand, index, _row)
        },
        handleBlur(row,index,editKey) {
            let _row = row
            _row[editKey]  = false
            this.$set(this.allBrand, index, _row)
        },
        //格式化日期
        dateFormat(row, column, cellValue, index){
            if(cellValue==null){
                return null
            }else{
                return cellValue.slice(0,10)
            }
        },
        //保存品牌
        saveBrand(val){
            let parmas={
                id:val.id,
                bname:val.bname,
                code:val.code
            }
            let success=data=>{
                if(data.code=="OK"){
                   return this.$message.success("保存成功")
                }else{
                   return this.$message.error(data.msg)
                }
            }
            api.erpBrandInfoUpdate(parmas,success)
        },
        //删除品牌
        delBrand(id){
             this.$confirm('是否删除该消息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
            }).then(() => {
                var _this=this
                //删除供应商列表信息
                let parmas={
                    id:id
                }
                let success=data=>{
                    if(data.code=='OK'){
                        _this.brandList()
                    }else{
                        this.$message.error(data.msg)
                    }
                }
                api.erpBrandInfoDelete(parmas,success)     
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
           
         
        },
      
        cancel(){
            this.$emit("closeDialog")
        }
    }
}
</script>
<style lang="scss" scoped>
.brandCountContainer{
    min-width:650px;
    right:0;
    height:100%;
    position: fixed;
    background:#fff;
    top:0;
    z-index:999;
    p{
        width:100%;
        text-align:left;
        line-height:45px;
        text-indent:20px;
        color:#41e2ef;
       
    }
    .invoiceContent{
        margin-left:10px;
    }
    .brandTable{
        width:98%;
        height:85%;
        overflow-y: auto;
    }

}
</style>
